<template>
  <div class="lable-box">
    <div class="title-box">
      <div class="title">个人中心</div>
      <ul>
        <li>
          <router-link :to="{ path: '/user/info' }" active-class="active">个人中心</router-link>
        </li>
        <li>
          <router-link :to="{ path: '/user/accountInfo' }" active-class="active">账户信息</router-link>
        </li>
        <li>
          <router-link :to="{ path: '/user/address' }" active-class="active">地址管理</router-link>
        </li>
      </ul>
      <div class="title">订购中心</div>
      <ul>
        <li>
          <router-link :to="{ path: '/user/myOrder' }" active-class="active">我的订购</router-link>
        </li>
        <li>
          <router-link :to="{ path: '/user/myCollect' }" active-class="active">我的收藏</router-link>
        </li>
        <li>
          <router-link :to="{ path: '/user/myRefund' }" active-class="active">我的退款</router-link>
        </li>
      </ul>
      <div class="title">购车服务</div>
      <ul>
        <li>
          <router-link :to="{ path: '/user/feedback' }" active-class="active">意见反馈</router-link>
        </li>
        <li>
          <router-link :to="{ path: '/user/BuyCarHelp' }" active-class="active">购车帮助</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "nav-lable",
};
</script>

<style lang="scss" scoped>
.lable-box {
  width: 100%;
  background: #fff;
  color: #333333;
  text-align: center;
  padding: 0 0 20px;
  .title {
    font-size: 18px;
    line-height: 46px;
    cursor: pointer;
    padding-top: 20px;
    &.active {
      color: #f0542e;
    }
  }
  li {
    font-size: 14px;
    line-height: 26px;
    cursor: pointer;
    a.active {
      color: #f0542e;
    }
  }
}
</style>